<template>
    <view class="content">
        <view style="position: fixed; top: 0;left: 0;">
            <personalInfo />
        </view>
        <view style="height: calc(100vh - 150rpx);margin-top: 150rpx;width: 100vw;">
            <content v-if="showState === 'content'"></content>
            <person v-if="showState === 'person'"></person>
        </view>

        <view class="fix_bar">
            <Bar @changeState="changeState" :showState="showState" />
        </view>
    </view>
</template>
<script>
import content from '../content/index';
import person from '../person/index'
import Bar from '../../pagesScreen/pagesCompontents/tabBars/index.vue';
import personalInfo from '../../pagesScreen/pagesCompontents/personal-info.vue'
import { stats } from '../../common/example';
export default {
    components: {
        content,
        person,
        personalInfo,
        Bar
    },
    data() {
        return {
            barShow: true,
            showState: 'content',
            leisure:0,
            running:0,
            fault:0
        }
    },
    methods: {
        changeState(state){
            console.log('state-->', state);
            this.showState = state
        },
    },
    onShow() {
        // 收运车辆统计
        stats({}).then(res => {
            console.log(res.data, '收运车辆统计');
            if (res.data.code == 200) {
                this.leisure = res.data.data.leisure || 0;
                this.running = res.data.data.running || 0;
                this.fault = res.data.data.fault || 0;
            }
        })
    }
}
</script>

<style>
.content {
    display: flex;
    flex-direction: column;
    background-color: #f2f8f5;
    min-height: 100vh;
    /* padding-bottom: 100rpx; */
}

.order_box image {
    width: 100%;
    /* background-color: #fedecc; */
    /* display: flex; */
    /* justify-content: space-between; */
    /* align-items: center; */
    /* padding: 40rpx; */
    /* border-radius: 60rpx; */
}

.grid_box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
}

.card_box {
    margin-top: 30rpx;
    background-color: #fff;
    display: flex;
    justify-content: space-between;
    height: 400rpx;
    align-items: center;
    padding: 40rpx;
    border-radius: 60rpx 60rpx 0 0;

}

.card_search_box {
    height: 100rpx;
    padding: 0 40rpx;
    border-radius: 0 0 60rpx 60rpx;
    background-color: #fedecc;
    color: #f3744d;
    display: flex;
    align-items: center;
    justify-content: space-around;
}

.li_box {
    margin-top: 20rpx;
    border-radius: 40rpx;
    padding: 30rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #fee9e1;
    height: 100rpx;
}

.fix_bar {
    position: fixed;
    bottom: 40rpx;
    left: 0;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
</style>
